// 之前学习的 哪些生命周期函数都是属于 类组件
// 从v16.8+开始， 
import { useState, useEffect } from "react"

function Header() {
  // 状态变量： 可以导致页面更新的。  普通变量： 只针对与js，不会导致页面更新
  const [count, setCount] = useState(0)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    // useEffect这个函数的参数里面如果用到了 一些状态变量，一定要加入到依赖项的数组里面去，否则就会有bug
    console.log(count, loading);
    document.title = `当前页面修改了${count}次`
    //给useEffect这个hooks添加 第二个参数，就是useEffect这个回调函数执行的时候 依赖项
  }, [count, loading])

  return (
    <>
      <h3>状态变量：{count}---{loading.toString()}</h3>
      <button onClick={() => setCount(count + 1) }>修改数据count</button>
      <button onClick={() => setLoading(!loading) }>修改数据login</button>
    </>
  )
}

function App() {
  return (
    <>
      <Header />
    </>
  )
}

export default App